<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>地质信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>

        $.post(
            "../geological/geologicalList",
            "tableName=class"+"&isDel=0",
            function (geological) {
                // console.log(geological);
                $.get(
                    "../geological/getTable",
                    function (tables) {
                        new Vue({
                            el: "#geological",
                            data: {
                                geologicalList: geological,
                                count: geological.length,
                                tableName:'class',
                                tableList:tables,
                                isDel:0,
                            },
                            methods: {
                                x_admin_show: function (title, url, w, h) {
                                    if (title == null || title == '') {
                                        title = false;
                                    }
                                    ;
                                    if (url == null || url == '') {
                                        url = "404.html";
                                    }
                                    ;
                                    if (w == null || w == '') {
                                        w = ($(window).width() * 0.9);
                                    }
                                    ;
                                    if (h == null || h == '') {
                                        h = ($(window).height() - 50);
                                    }
                                    ;
                                    layer.open({
                                        type: 2,
                                        area: [w + 'px', h + 'px'],
                                        fix: false, //不固定
                                        maxmin: true,
                                        shadeClose: true,
                                        shade: 0.4,
                                        title: title,
                                        content: url
                                    });
                                },
                                dzxx_del: function (ID) {
                                    var that=this;
                                    var isDel_1=0;
                                    var isDel_var="";
                                    if(that.isDel==0){
                                        isDel_1=1;
                                        isDel_var="是否删除？";
                                    }else {
                                        isDel_1=0;
                                        isDel_var="是否恢复？";
                                    }
                                    var r = confirm(isDel_var);
                                    if (r == true) {
                                        $.post(
                                            "../geological/delDzxx",
                                            "ID=" + ID+"&tableName="+that.tableName+"&isDel="+isDel_1,
                                            function (msg) {
                                                var tableNameId=$("#tableNameId").html();
                                                that.selectTable(tableNameId);
                                            }
                                        );
                                    }
                                },
                                selectIsDel: function (isDel) {
                                    var that = this;
                                    that.isDel=isDel;
                                    that.selectTable('selectTable1');
                                },
                                selectTable:function (selectTable) {
                                    var that=this;
                                    var tableName_1=$("#"+selectTable+" option:selected").text();
                                    $.post(
                                        "../geological/geologicalList",
                                        "tableName="+tableName_1+"&isDel="+that.isDel,
                                        function (geological_1) {
                                            that.geologicalList=geological_1;
                                            that.count=geological_1.length;
                                            that.tableName=tableName_1;
                                            var tableNameId=$("#tableNameId");
                                            tableNameId.html(selectTable);
                                            /**如果isDel=1设置操作按钮为恢复按钮*/
                                            if(that.isDel==1){
                                                $(".editDzxx").hide();
                                                $(".isDel_icon").html('&#x1005;');
                                                $(".isDel_icon").attr("title","恢复");
                                            }else {
                                                $(".editDzxx").show();
                                                $(".isDel_icon").html('&#xe640;');
                                                $(".isDel_icon").attr("title","删除");
                                            }
                                        }
                                    );
                                }
                            }
                        });
                    }
                )
            }
        )
    </script>
    <style>
        .textareaStyle{
            border: none;
            width: 200px;
            height: 80px;
            /*width: 100%;*/
            /*height: 100%;*/
            resize: none;
            /*cursor: pointer;*/
        }
        .selectStyle{
            width: 120px;
            float: left;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">地质信息列表</a>
        <a>
          <cite>地质信息管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="geological">
    <div class="layui-row">
        <input type="text" id="selectWname" placeholder="请输入姓名" class="layui-input"
               style="width: 200px;padding: 5px;float:left;">
        <button class="layui-btn" @click="getWorkerByName()" style="float:left;"><i class="layui-icon">&#xe615;</i>
        </button>
    </div>
    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加信息','./addGeological.html',500,600)"><i class="layui-icon"></i>添加
        </button>
        <div style="clear: both"></div>
        <div hidden id="tableName">class</div>
        <div hidden id="tableNameId">selectTable1</div>
        <div class="selectStyle">
            分类1：<select id="selectTable1" @click="selectTable('selectTable1')">
                <option :value="table.tableName" v-for="table in tableList" v-if="table.type==1">{{table.tableName}}</option>
            </select>
        </div>
        <div class="selectStyle">
            分类2：<select id="selectTable2" @click="selectTable('selectTable2')">
                <option :value="table.tableName" v-for="table in tableList" v-if="table.type==2">{{table.tableName}}</option>
            </select>
        </div>
        <div class="selectStyle">
            分类3：<select id="selectTable3" @click="selectTable('selectTable3')">
                <option :value="table.tableName" v-for="table in tableList" v-if="table.type==3">{{table.tableName}}</option>
            </select>
        </div>
        <div class="selectStyle">
            分类4：<select id="selectTable4" @click="selectTable('selectTable4')">
                <option :value="table.tableName" v-for="table in tableList" v-if="table.type==4">{{table.tableName}}</option>
            </select>
        </div>
        <div class="selectStyle">
            分类5：<select id="selectTable5" @click="selectTable('selectTable5')">
                <option :value="table.tableName" v-for="table in tableList" v-if="table.type==5">{{table.tableName}}</option>
            </select>
        </div>
        <div>
            <label><input type="radio" name="isDel" value="未删除" @click="selectIsDel(0)" checked>未删除</label>
            <label><input type="radio" name="isDel" value="已删除" @click="selectIsDel(1)">已删除</label>
        </div>



        <span class="x-right" style="line-height:40px">共有数据：{{count}} 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>Label</th>
            <th>Type</th>
            <th>Father</th>
            <th>Reference_ID</th>
            <th>Description</th>
            <th>Location</th>
            <th>Period</th>
            <th>edit</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(geological,i) in geologicalList">
            <td>{{i+1}}</td>
            <td>{{geological.id}}</td>
            <td>{{geological.label}}</td>
            <td>{{geological.type}}</td>
            <td>{{geological.father}}</td>
            <td><textarea class="textareaStyle">{{geological.reference_ID}}</textarea></td>
            <td>{{geological.description}}</td>
            <td>{{geological.location}}</td>
            <td>{{geological.period}}</td>
            <td class="td-manage">
                <a class="editDzxx" title="编辑" @click="x_admin_show('编辑','updataGeological.html?ID='+geological.id+'&tableName='+tableName,500,550)"
                   href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a class="isDel" title="删除" @click="dzxx_del(geological.id)" href="javascript:;">
                    <i class="layui-icon isDel_icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>

</div>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }


    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>